<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="province" class="province" id="">
        <option value="">--请选择省份--</option>
    </select>
    <select name="city" class="city" id="">
        <option value="">--请选择市--</option>
    </select>
    <select name="country" class="country" id="">
        <option value="">--请选择区/县--</option>
    </select>

    <script>
        let province = document.getElementsByName("province")[0];
        let city = document.getElementsByName("city")[0];
        let country = document.getElementsByName("country")[0];
        let nowProvince; //当前省份
        let nowCity; //当前市

        fetch("./city.json", {
            method: "GET",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            }
        }).then(function(response) {
            return response.json();
        }).then(function(data) {
            for (let k1 in data) {
                province.innerHTML += `<option value="${k1}">${k1}</option>`;
            };
            // 省份
            province.addEventListener("change", function() {
                nowProvince = this.value;

                city.innerHTML = `<option value="">--请选择市--</option>`;
                country.innerHTML = `<option value="">--请选择区/县--</option>`;

                for (let k2 in data[nowProvince]) {
                    city.innerHTML += `<option value="${k2}">${k2}</option>`;
                };
            });
            // 市
            city.addEventListener("change", function() {
                nowCity = this.value;

                country.innerHTML = `<option value="">--请选择区/县--</option>`;

                // 区/县
                data[nowProvince][nowCity].forEach(function(item) {
                    country.innerHTML += `<option value="${item}">${item}</option>`;
                })
            });
        }).catch(function(error) {
            console.log(error);
        });
    </script>
</body>

</html>